/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;

.root {
  /* used for test-utils */
}

.textarea {
  @include styles.styles-reset;
  // Restore browsers' default resize values
  resize: auto;
  // Restore default text cursor
  cursor: text;
  // Allow multi-line placeholders
  white-space: pre-wrap;

  padding-block: styles.$control-padding-vertical;
  padding-inline: styles.$control-padding-horizontal;

  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
  max-inline-size: 100%;
  inline-size: 100%;
  display: block;
  box-sizing: border-box;
  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
  border-start-start-radius: styles.$control-border-radius;
  border-start-end-radius: styles.$control-border-radius;
  border-end-start-radius: styles.$control-border-radius;
  border-end-end-radius: styles.$control-border-radius;

  border-block: awsui.$border-width-field solid
    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
  border-inline: awsui.$border-width-field solid
    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);

  box-shadow: var(#{custom-props.$styleBoxShadowDefault});

  @include styles.font-body-m;

  &:hover {
    border-color: var(
      #{custom-props.$styleBorderColorHover},
      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
    );
    color: var(
      #{custom-props.$styleColorHover},
      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
    );
    background-color: var(
      #{custom-props.$styleBackgroundHover},
      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
    );
    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
  }

  &.textarea-readonly {
    @include styles.form-readonly-element(
      $background-color: var(
          #{custom-props.$styleBackgroundReadonly},
          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
        ),
      $border-color: var(
          #{custom-props.$styleBorderColorReadonly},
          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
        )
    );
    color: var(
      #{custom-props.$styleColorReadonly},
      var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
    );
    box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
  }

  &::placeholder {
    @include styles.form-placeholder(
      $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
      $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
      $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
      $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
    );
    opacity: 1;
  }

  &:focus {
    @include styles.form-focus-element(
      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
    );
    color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
    background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
  }

  &:invalid {
    // discard built-in invalid styles, customers should use `invalid` property only (AWSUI-3947)
    box-shadow: none;
  }

  &:disabled {
    @include styles.form-disabled-element(
      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
      $cursor: default
    );
    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
    &::placeholder {
      @include styles.form-placeholder-disabled;
      opacity: 1;
    }
  }

  &.textarea-invalid {
    @include styles.form-invalid-control(
      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-error),
      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error)
    );
  }

  &.textarea-warning {
    @include styles.form-warning-control(
      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-warning),
      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning)
    );
  }
}
